<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="!form.id ? '新增' : '修改'"
                         :visible.sync="visible">
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="type">
                        <el-radio-group v-model="form.type" size="small">
                            <el-radio-button label="0">菜单</el-radio-button>
                            <el-radio-button label="1">按钮</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级菜单">
                        <treeselect v-model="form.parentId"
                                                :options="menuOptions"
                                                :normalizer="normalizer"
                                                :show-count="true"
                                                plgetMenuaceholder="选择上级菜单"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="图标" prop="icon" v-if="form.type === '0'">
                <avue-input-icon v-model="form.icon" :icon-list="iconList"></avue-input-icon>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入菜单名称"/>
            </el-form-item>
            <el-form-item label="路由地址" prop="path" v-if="form.type !== '1'">
                <el-input v-model="form.path" placeholder="请输入路由地址"/>
            </el-form-item>
            <el-form-item label="权限标识" prop="permission" >
                <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50"/>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="路由缓冲" prop="keepAlive" v-if="form.type !== '1'">
                        <el-radio-group v-model="form.keepAlive">
                            <el-radio-button label="0">否</el-radio-button>
                            <el-radio-button label="1">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示/隐藏" prop="isShow" v-if="form.type !== '1'
                        && form.name !== '菜单管理' && form.name !== '字典管理'">
                        <el-radio-group v-model="form.isShow">
                            <el-radio-button label="0">显示</el-radio-button>
                            <el-radio-button label="1">隐藏</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item v-show='showCol' label="系统类别" >
                    <el-select v-model="form.systemType" placeholder="系统类别">
                        <el-option
                            v-for="item in form.menuTypes"
                            :key="item.key"
                            :value="item.key"
                            :label="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
            <el-button @click="visible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {addObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu'
    import {getDictByType} from '@/api/admin/dict'
    import Treeselect from "@riophae/vue-treeselect"
    import iconList from '@/const/iconList'
    import TableForm from './'
    import "@riophae/vue-treeselect/dist/vue-treeselect.css"

    export default {
        name: "Menu",
        components: {Treeselect, TableForm},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 菜单树选项
                menuOptions: [],
                // 是否显示弹出层
                visible: false,
                // 图标
                iconList: iconList,
                showCol: false,
                type: '',
                form: {
                    name: undefined,
                    path: undefined,
                    icon: undefined,
                    permission: undefined,
                    type: '0',
                    keepAlive: '0',
                    isShow: '0',
                    sort: 999,
                    systemType: '',
                    menuType: '', // 临时全局变量
                    menuTypes: [],
                },
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "菜单名称不能为空", trigger: "blur"}
                    ],
                    sort: [
                        {required: true, message: "菜单顺序不能为空", trigger: "blur"}
                    ],
                    path: [
                        {required: true, message: "路由地址不能为空", trigger: "blur"}
                    ],
                    keepAlive: [
                        {required: true, message: "路由缓冲不能为空", trigger: "blur"}
                    ],
                    permission: [
                        {required: true, message: "权限标识不能为空", trigger: "blur"}
                    ]
                }
            };
        },
        methods: {
            init(isEdit, id,menuType) {
                this.menuType = menuType;
                // 新增页面显示字段,编辑不显示
                this.showCol = !isEdit;
                this.visible = true
                this.getTreeselect();
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (isEdit) {
                        getObj(id).then(response => {
                            this.form = response.data.data
                        })
                    } else {
                        this.form.id = undefined
                    }
                });
                getDictByType("systemType").then(response => {
                    this.form.menuTypes = response.data.data;
                    // this.form.systemType = this.form.menuTypes[0].key;
                });

            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        if (this.form.parentId === undefined) {
                            this.form.parentId = -1
                        }

                        if (this.form.id) {
                            putObj(this.form).then(data => {
                                this.$message.success('修改成功')
                                this.visible = false
                                this.$emit('refreshDataList')
                                // location.reload();
                            });
                        } else {
                            addObj(this.form).then(data => {
                                this.$message.success('添加成功')
                                this.visible = false
                                this.$emit('refreshDataList',this.menuType)
                                // location.reload();
                            })
                        }
                    }
                })
            },
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                fetchMenuTree(false,'',this.menuType).then(response => {
                    this.menuOptions = [];
                    const menu = {id: -1, name: '根菜单', children: []};
                    menu.children = response.data.data;
                    this.menuOptions.push(menu);
                });
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            }
        }
    };
</script>
